<template>
  
    <div>
        <h1>less</h1>
        <div class="box">
            <p></p>
        </div>
    </div>
</template>

<script>
export default {

}
</script>


<style lang="less">
/* style lang='less' */
//变量
@import "../assets/less/index.less";
.box{
    width: @size2;
    height: @size2;
    background: red;
    p{
        width:@size1;
        height:@size1;
        background: teal;
        &:hover{
            background:pink;
        }
    }
}
</style>